<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="departmentId" test="name" v-on:confirm="filterEvent"></filter-tool>
          <filter-tool class="filtertool" type="stockInTypeId" test="name" v-on:confirm="filterEvent"></filter-tool>
          <filter-tool class="filtertool" type="godownEntryState" test="name" v-on:confirm="filterEvent($event,'state')"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;float: right">
        <el-button size="mini" @click="addInboundBtn" type="primary" icon="el-icon-plus"/>
      </el-form-item>
    </el-form>
    <el-table :data="godownEntryList" @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.godownEntryItems" border style="box-shadow:0 0 20px #eee" max-height="250">
            <el-table-column type="index" label="序号" width="50px"/>
            <el-table-column label="产品名" prop="title">
              <template slot-scope="scope">
                {{scope.row.title.split('&&')[0]}}
              </template>
            </el-table-column>
            <el-table-column label="属性" prop="data.props"></el-table-column>
            <el-table-column label="sn" prop="sn"></el-table-column>
            <el-table-column label="单位" prop="data.unit"></el-table-column>
            <el-table-column label="数量" prop="num"></el-table-column>
          </el-table>
          <div style="margin-top: 10px;display: flex;flex-direction: row-reverse">
          <el-button v-if="props.row.state === 1 && !props.row.cancel" size="mini" type="danger" @click="cancelBtn(props)">作废</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" label="序号"/>
      <el-table-column label="时间" prop="created" :formatter="formatterTime"/>
      <el-table-column label="标题" prop="title"/>
      <el-table-column label="状态" prop="state">
        <template slot-scope="scope">
          <span v-if="scope.row.cancel">已作废</span>
          <span v-else-if="scope.row.state === 1" style="color:red">未入库</span>
          <span v-else-if="scope.row.state === 2" style="color:green">已入库</span>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <batch-tool :titleList="titleList" v-on:operateEvent="operateEvent" style="border: 0px solid blue;display: flex;flex-direction:column;justify-content: center;"></batch-tool>
    </div>
    <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <el-row class="progressBox" v-if="listLength >0">
      <!--<el-progress class="progress" type="circle" :percentage='30'>操作者</el-progress>-->
      <el-progress class="progress" type="circle" :percentage="(listLength-selInbound.length)/listLength *100"/>
      <el-row>操作中……</el-row>
    </el-row>
    <el-dialog title="新建入库单" :visible.sync="showNewDialog" width="80%">
      <new-inbound v-on:success="getGodownEntryList(0,filterObj)"></new-inbound>
    </el-dialog>
  </section>
</template>

<script>
  import newInbound from './newInbound'
  import batchTool from '@/common/batchTool'
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "index",
    props:['currWarehouse'],
    components:{filterTool,searchTool,batchTool,newInbound},
    data(){
      return{
        totalPage:0,
        filterObj:{},
        godownEntryList:null,
        selInbound:null,
        titleList:['确认入库'],
        listLength:0,
        showNewDialog:false
      }
    },
    created(){
      console.log('inventory-----------',this.currWarehouse)
      if(this.currWarehouse.id){
        this.getGodownEntryList()
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      formatterTime(a,b,c,d){
        return dateFormater.formatDatetime(c)
      },
      handleSelectionChange(e){
        console.log('多选事件----',e)
        this.selInbound=[]
        e.forEach(g=>{
          this.selInbound.push(g.id)
        })
      },
      goPage(val){
        this.getGodownEntryList(val-1,this.filterObj)
      },
      getGodownEntryList(pageNo,filterObj){
        this.fetch({name:"getGodownEntryList",data:{page:pageNo?pageNo:0,warehouseId:this.currWarehouse.id,...filterObj}})
          .then(res=>{
            console.log('当前入库单--------',res)
            this.godownEntryList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      filterEvent(e,objK){
        console.log('筛选条事件---------',e,objK)
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        console.log('看下filterObj----------',this.filterObj)
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        console.log('看下tmp----------',tmp)
        this.getGodownEntryList(0,tmp)//筛选入库单列表
      },
      searchProductEvent(e){
        this.filterObj.key=e
        this.getGodownEntryList(0,this.filterObj)//搜索入库单列表
      },
      addInboundBtn(){
        console.log('新建入库单---------')
        // this.currInbound={}
        this.showNewDialog=true
      },
      operateEvent(e){
        if(this.selInbound === null || this.selInbound.length <=0){
          this.$message({type:'error',message:'请至少选择一个入库单！'})
          return
        }
        //批量操作中。。。
        this.listLength=this.selInbound.length
        if(e === 0){
          //过滤一下已入库的入库单
          console.log('确认入库',this.selInbound)
          let entryAble=[]
          let entryUnable=[]
          this.selInbound.forEach(i=>{
            let iState=this.godownEntryList.find(g=>g.id === i).state
            if(iState === 1){
              entryAble.push(i)
            }else {
              entryUnable.push(i)
            }
          })
          console.log('能入库的。。。。',entryAble)
          if(entryAble.length<=0){
            this.listLength=0
            this.$message({type:'error',message:'无可用入库单操作，请确认！'})
            return
          }
          if(entryUnable.length > 0){
            this.$message({message:'有已入库的单据被过滤。'})
          }
          this.importStockList(entryAble)
        }
      },
      importStockList(array){
        this.fetch({name:"importStockList",data:{godownEntryId:array[0]}})
          .then(res=>{
            array.splice(0,1)
            if(array.length>0){
              this.importStockList(array)
            }else {
              console.log('入库成功',res)
              this.$message({type:'success',message:'入库成功'})
              this.getGodownEntryList()
              setTimeout(()=>{this.listLength=0},1500)
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      test(){
        console.log('看看选中的入库单--------',this.selInbound)
        console.log('看列表---------',this.godownEntryList)
      },
      cancelBtn(props){
        console.log('作废当前入库单----------',props)
        this.$confirm('确认作废？')
          .then(()=> {
            this.fetch({name:"cancelGodownEntry",data:{id:props.row.id}})
              .then(res=>{
                this.$message({type:'info',message: '操作成功！'})
                this.getGodownEntryList(0,this.filterObj)//搜索入库单列表
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({type:'info',message: '已取消删除'})
            this.loading = false
          })
      }
    }
  }
</script>

<style scoped>
  .filtertool{
    margin: 0 5px;
    width: 110px;
    border:0px solid red;
  }
  .progressBox{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-items: center;*/
    justify-content: center;
    z-index: 100;
    background-color: rgba(255,255,255,0.6);
  }
  .progress{
    position:relative;
    z-index: 1001;
    text-align: center;
  }
</style>
